import {Form, redirect} from "react-router-dom";
import {useState} from "react";

export default function articleNew() {
    const [tag, setTag] = useState("");
    const [tags, setTags] = useState([]);

    return (<div className="editor-page">
            <div className="container page">
                <div className="row">
                    <div className="col-md-6 col-xs-12 offset-md-3">
                        <h1>创建文章</h1>
                        <Form method="post">
                            <fieldset className="form-group">
                                <input
                                    className="form-control form-control-lg"
                                    type="text"
                                    placeholder="文章标题"
                                    name="title"
                                />
                            </fieldset>
                            <fieldset className="form-group">
                                <input
                                    className="form-control form-control-lg"
                                    type="text"
                                    placeholder="文章描述"
                                    name="description"
                                />
                            </fieldset>
                            <fieldset className="form-group">
                                <textarea
                                    className="form-control form-control-lg"
                                    style={{resize: "none"}}
                                    rows="8"
                                    placeholder="用Markdown格式编辑文章"
                                    name="body"
                                ></textarea>
                            </fieldset>
                            <fieldset className="form-group">
                                <input
                                    className="form-control form-control-lg"
                                    type="text"
                                    placeholder="输入标签"
                                    onChange={(e) => setTag(e.target.value)}
                                    onKeyUp={(e) => {

                                        if(e.keyCode === 65) {
                                            setTags([...tags,tag]);
                                            setTag("")
                                        }
                                    }}
                                />
                                {
                                    tags.map(tag=>{
                                        return (<span key={tag} className="tag-default tag-pill">
                                            <i className="fa fa-trash-o fa-lg" onClick={()=>{
                                                const filterTags = tags.filter(ftag=>{
                                                    console.log(ftag)
                                                    return ftag  != tag;
                                                })
                                                setTags(filterTags)
                                            }}></i>
                                            {tag}</span>)
                                    })
                                }
                                <input type="hidden" value={[tags]} name="tags"/>
                            </fieldset>
                            <button className="btn btn-lg btn-primary pull-xs-right" type="submit">发布文章</button>
                        </Form>
                    </div>
                </div>
            </div>
    </div>)
}